<template>
  <div>
    <div class="tittle">
      <h3>
        <span>
          个人设置
        </span>
      </h3>
    </div>
    <div class="update-form">
      <div class="form">
        <div class="itm-name">
          <label>昵称：</label>
          <a-input v-model:value="nickname" class="name" placeholder="昵称" />
        </div>
        <div class="itm-introduce">
          <label>介绍：</label>
          <a-textarea v-model:value="introduce" class="introduce" placeholder="介绍一下自己吧" :rows="6" />
        </div>
        <div class="itm-sex">
          <label>性别：</label>
          <a-radio-group v-model:value="sex">
            <a-radio :value="1">男</a-radio>
            <a-radio :value="0">女</a-radio>
            <a-radio :value="2">保密</a-radio>
          </a-radio-group>
        </div>
        <div class="itm-birthday">
          <label>生日：</label>
          <a-date-picker class="birthday" :default-value="birthday" placeholder="生日日期" @change="getBirthday" />
        </div>
        <div class="itm-place">
          <label for="">地区：</label>
          <a-cascader class="place" :options="options" placeholder="请选择地区" v-model="selectedPlace" />
        </div>
        <a-button type="primary" class="save" @click="updateUserinfo">保存</a-button>
      </div>
      <div class="avatar-box">
        <img :src="avatar" />
        <div class="bottom">
          <a href="javascript:;" @click="showModal">
            <p>更换头像</p>
          </a>
        </div>
        <a-modal v-model:visible="visible" title="上传图片" :destroyOnClose="true" okText="确认" cancleText="取消"
          @ok="handleOk">
          <div class="upload">
            <a-upload name="file" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
              action="http://127.0.0.1:8080/api/user/update_avatar" :before-upload="beforeUpload" :data="account"
              @change="handleChange">
              <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                  Upload
                </div>
              </div>
            </a-upload>
            <div class="tips">
              请选择图片上传，大小不超过1MB
            </div>
          </div>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import options from "./city.js";
import moment from "moment"
import {
  get_userinfo,
  update_avatar,
  update_userinfo
} from "@/request/api/user";
export default {
  name: "userupdate",

  data () {
    return {
      userid: "",
      nickname: "",
      introduce: "",
      birthday: moment('2015-06', 'YYYY-MM'),
      sex: "",
      id: '',
      //导入的全国城市数据
      options,
      //级联选择默认值
      selectedPlace: ["北京市", "北京市", "东城区"],
      avatar: this.$store.state.user.avatar,
      visible: false,
      loading: false,
      imageUrl: '',
    };
  },
  computed: {
    token () {
      return this.$store.state.user.token;
    },
    account () {
      return { "account": this.$store.state.user.account }
    }
  },
  methods: {
    getUserInfo () {
      console.log(1);
      get_userinfo().then(res => {
        if (res.code == 0) {
          let { account, avatar, gender, id, username, levelId, city, birth, content } = res.user;
          this.$store.commit("user/SET_USERID", id)
          this.$store.commit("user/SET_USERNAME", username)
          let avatarUrl = "http://127.0.0.1:8080" + avatar
          this.$store.commit("user/SET_AVATAR", avatarUrl)
          this.$store.commit("user/SET_ACCOUNT", account)
          this.$store.commit("user/SET_lEVEL", levelId)
          this.$store.commit("user/SET_CITY", city)
          this.$store.commit("user/SET_SEX", gender)
          this.$store.commit("user/SET_BIRTH", birth)
          this.$store.commit("user/SET_INTRODUCE", content)
        }
      }).catch((err) => {
        console.log(err);
      });
    },
    getBirthday (value, selectedOptions) {
      this.birthday = selectedOptions;
    },
    //更新资料
    updateUserinfo () {
      var _this = this;
      let data = {
        "id": this.$store.state.user.userId,
        "account": this.$store.state.user.account + "",
        "username": this.nickname,
        "mobile": "",
        "gender": this.sex,
        "birth": this.birthday,
        // 将级联选择的数组变为字符串
        "city": `${_this.selectedPlace[0]}-${_this.selectedPlace[1]}-${_this.selectedPlace[2]}`,
        "job": "",
        "sign": "",
        "content": this.introduce,
      };
      update_userinfo(data)
        .then(res => {
          if (res.code == 0) {
            this.$message.success("更新资料成功");
            this.getUserInfo();
          } else {
            this.$message.error("更新资料失败");
          }
        })
        .catch(err => {
          this.$message.error("更新资料失败");
        });
    },
    showModal () {
      this.visible = true;
    },

    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('只能选择jpg或png格式');
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        this.$message.error('图片必须小于1MB');
      }
      return isJpgOrPng && isLt2M;
    },
    // 上传图片
    handleChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      console.log(info.file.response);
      if (info.file.status === 'done') {
        this.loading = false
      }
      if (info.file.status === 'error') {
        this.$message.error("上传失败")
        this.loading = false
      }
      if (info.file.response.code == 0) {
        this.imageUrl = "http://127.0.0.1:8080" + info.file.response.avatar
      }
    },
    handleOk () {
      this.$store.state.user.avatar = this.imageUrl
      this.visible = false

    },


  }
};
</script>

<style scoped>
.tittle {
  width: 900px;
  height: 40px;
}
.tittle h3 span {
  font-size: 24px;
}

.update-form {
  width: 900px;
  height: 400px;
}
.form {
  float: left;
  width: 340px;
  margin-top: 30px;
  margin-right: 30px;
}
label {
  float: left;
  line-height: 32px;
}
.itm-name {
  width: 100%;
  height: 32px;
}
.name {
  float: left;
  width: 298px;
  height: 32px;
}

.itm-introduce {
  width: 100%;
  height: 138px;
  margin-top: 10px;
}

.introduce {
  max-width: 87%;
}

.itm-sex {
  width: 340px;
  height: 32px;
  margin-top: 10px;
}

.itm-birthday {
  width: 340px;
  height: 32px;
  margin-top: 10px;
}
.birthday {
  width: 200px;
}
.itm-place {
  width: 340px;
  height: 32px;
  margin-top: 10px;
}
.place {
  width: 200px;
}

.save {
  margin-left: 42px;
  margin-top: 30px;
}

.avatar-box {
  width: 140px;
  height: 140px;
  float: left;
  margin-top: 30px;
  position: relative;
}

.avatar-box img {
  width: 140px;
  height: 140px;
}
.caijian {
  width: 300px;
  height: 300px;
  float: left;
}

.bottom {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 27px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.bottom a {
  color: #ffffff;
  font-size: 12px;
  text-align: center;
}
.bottom a p {
  margin: 0 auto;
  margin-top: 5px;
}

.upload {
  position: relative;
  width: 472px;
  height: 250px;
}
.avatar-uploader {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tips {
  text-align: center;
  position: absolute;
  width: 300px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 60%);
}
</style>
